<template>
  <Row class="Info_box">
      <i-col span="16">
        <i class="log"></i>
        <img :src="gData.g_longImg" />
      </i-col>
      <i-col span="7" class="Info_introduce">
        <h1>{{gData.g_name}}<Button class="descText" type="primary" @click="openDesc()">简介</Button></h1>
        <p class="p1">已筹到</p>
        <p class="p2"><span class="span1">￥</span>{{gData.g_start_money}}</p>
        <div v-if="gData.g_pace>=100">
          <Progress :percent="100" :stroke-color="['#B300CB', '#FF00AB']" hide-info status="success"/>
        </div>
        <div v-else>
          <Progress :percent="gData.g_pace" :stroke-color="['#B300CB', '#FF00AB']" hide-info status="success"/>
        </div>
        <p class="pace_p">
          <span class="pace_span1">当前进度{{gData.g_pace}}%</span>
          <span class="pace_span2">{{gData.buy_num}}名支持者</span>
        </p>
        <p class="p3">此项目必须在<span>{{gData.g_end_date}}</span>前得到<span>￥{{gData.g_end_money}}</span>的支持才能成功！ 剩余<span>{{gData.g_remaining_day}}</span>天</p>
        <p class="p4">
          <Button type="success" @click="change_btn(2000)"><Icon type="ios-heart" />{{gData.isfollowers}}({{gData.followers_num}})</Button>
          <Button type="warning" @click="change_btn(2001)"><Icon type="ios-thumbs-up" />{{gData.islikes}}({{gData.likes_num}})</Button>
        </p>
        <p class="p3">分享到</p>
        <p>
          <i class="icon"><img src="~assets/icon/QQ.png" @click="toA"></i>
          <i class="icon"><img src="~assets/icon/weixin.png" @click="toA"></i>
          <i class="icon"><img src="~assets/icon/weibo.png" @click="toA"></i>
        </p>
        <p></p>
      </i-col>
  </Row>
</template>

<script>
import {getDetail} from '../../../../../server/getDetail'
export default {
  data() {
    return {
      gData: {
        g_longImg:'https://img30.360buyimg.com/cf/jfs/t1/115789/24/9389/145762/5eda2aadEd39d4885/bf8043bc4f8d5647.jpg',//长图
        g_name:'科大讯飞OS智能语音脖颈耳机',
        g_start_money:15620,//当前筹到多少钱
        g_pace:156,//当前进度
        buy_num:141,//支持者
        g_end_date:'2020年07月25日',//结束日期
        g_end_money:10000,//总共需多少
        g_remaining_day:27,//剩余天数
        followers_num:165,//关注数
        likes_num:27,//点赞数
        islikes:'点赞',
        isfollowers:'关注',
        g_text:'哈哈哈，我是最帅的',//商品简介
        },
    };
  },
  props:{
    gid:{//商品id
      type:Number,
      required:true,
    },
  },
  methods: {
    toA() {//分享按钮
      alert("没有接口");
    },
    change_btn(changeId) {//关注点赞按钮
      if(this.$store.state.user.isLogin){//判断是否登录
        //登录
        var gidData = {
          gid:this.gid,
          change_id:changeId,
        }
        getDetail('index/Getdetail/change',gidData).then(res=>{
          this.$Message.success(res.message);
          var gidData = {
            id:this.gid,
          };
          getDetail('index/Getdetail/select',gidData).then(res=>{
            if(res.err_code==1000){
              this.gData = res.data;
            }else{
     
              this.$Message.error("请先点击商品");
            }
          })
        })
      }else{
        this.$Message.error('请先登录');
      }
    },
    addMoeny(e){
      this.gData = e;
    },
    openDesc(){//简介
      this.$Notice.open({
          title: "简介：",
          desc: this.gData.g_text,
      });
    }
  },
  created(){
   
    var gidData = {
      id:this.gid,
    };
    getDetail('index/Getdetail/select',gidData).then(res=>{
      if(res.err_code==1000){
        this.gData = res.data;
      }else if(res.err_code==undefined){
        this.$router.push({path:'home'});
      }
    });
    this.$show.$on('payOrderSuccess',this.addMoeny);
    this.$show.$on('payWuSiSuccess',this.addMoeny);
  }
};
</script>

<style scoped>
/* 信息主框 */
.Info_box {
  /* border: 1px solid red; */
  height: 28.02083vw;
  min-width: 80.5vw;
  width: 80.5vw;
  margin: auto;
  position: relative;
  top: 5.60417vw;
  background-color: white;
}
.Info_box img {
  width: 51.875vw;
  height: 26vw;
  position: relative;
  margin: 1.004vw;;
}
.log{
    background-image: url("~assets/icon/headLog.png");
    display: inline-block;
    height: 8.4vw;
    width: 8.4vw;
    min-width: 8.4vw;
    min-height: 8.4vw;
    z-index: 1;
    position: absolute;
    background-position: 1px 33.5vw;
    background-size: cover;
}
/* 详情信息 */
.Info_introduce {
  /* border:1px solid blue; */
  height: 26vw;
  margin: 1.004vw;;
}
.Info_introduce h1{
  font-size: 1.56vw;
}
.p1{
  font-size: 1.3vw
}
.span1{
    font-size: 1.8vw;
    font-weight: bold;
    color: black;
}
.p2{
    font-size: 3.8vw;
    color: black;
    margin-bottom: 1.3vw;
}
.pace_p{
    font-size: 0.99vw;
    margin-top: 0.7vw;
}
.pace_span1{
  color: #B300CB;
}
.pace_span2{
  float: right;
  color: black;
}
.p3{
  font-size: 1.06vw;
  margin-top: 1vw;
}
.p3 span{
  color: #FF5556;
}
.p4{
  text-align: center;
  margin-top: 1.5vw;
  margin-bottom: 2.5vw;
}
.p4 button{
    width: 11.3vw;
    margin-left: 0.26042vw;
    height: 3.15vw;
    font-size: 1.1vw;
    text-align: center;
}
.p4 i{
      margin-right: 10px;
    font-size: 1.6vw;
}
.icon{
    display: inline-block;
    width: 1.9vw;
    text-align: center;
    height: 1.9vw;
    line-height: 2.7vw;
    /* border: 1px solid; */
    border-radius: 0.41667vw 0.41667vw;
    background-color: #A4A4A4;
    margin-right: 0.3vw;
    cursor: pointer;
}
.icon img{
      width: 1.6vw;
    height: 1.4vw;
    margin: 0;
}
.icon:nth-child(1):hover{
  background-color: #34A4E2;
}
.icon:nth-child(2):hover{
  background-color: #6FC830;
}
.icon:nth-child(3):hover{
  background-color: #FF0000;
}
.descText{
  float: right;
}
</style>
